<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="85px"
    >
      <el-form-item label="主题" prop="subject">
        <el-input
          v-model="queryParams.subject"
          placeholder="请输入"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="流程名称" prop="processName">
        <el-input
          v-model="queryParams.processName"
          placeholder="请输入"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="发起人" prop="initiateName">
        <el-input
          v-model="queryParams.initiateName"
          placeholder="请输入"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="发起人组织" prop="initiateOrg">
        <el-select
          v-model="queryParams.initiateOrg"
          placeholder="请选择"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        >
          <el-option
            v-for="(item, index) in deptList"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          v-preventReClick
          type="primary"
          icon="el-icon-search"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button v-preventReClick icon="el-icon-refresh" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="list">
      <el-table-column label="流程编号" align="center" prop="processNo" />
      <el-table-column label="主题" align="center" prop="subject" />
      <el-table-column label="流程名称" align="center" prop="processName" />
      <el-table-column label="环节分类" align="center" prop="processType">
        <template v-slot="scope">
          <div>{{ map[scope.row.processType] }}</div>
        </template>
      </el-table-column>
      <el-table-column label="发起人" align="center" prop="initiateName" />
      <el-table-column label="发起人组织" align="center" prop="initiateOrg">
        <template v-slot="scope">
          <div>
            {{
              deptList.find((element) => element.id === scope.row.initiateOrg).name
            }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="发起时间"
        align="center"
        prop="createTime"
        width="180"
      >
        <template v-slot="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="流程状态" align="center" prop="processStatus">
        <template v-slot="scope">
          <div>{{ status[scope.row.processStatus] }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template v-slot="scope">
          <el-popconfirm
            confirm-button-text="确定"
            cancel-button-text="取消"
            icon="el-icon-info"
            icon-color="red"
            :title="`确定终止流程:${scope.row.processName}？`"
            @confirm="stop(scope.row)"
          >
            <el-button
              v-if="[1, 2].includes(scope.row.processStatus)"
              v-preventReClick
              type="text"
              slot="reference"
              >终止</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      @pagination="getPagination"
    />
  </div>
</template>

<script>
import { getList, stopProcess, getDept } from "@/api/intervene";

export default {
  name: "SystemLoginLog",
  data() {
    return {
      map: {
        1: "发起",
        2: "审批",
        3: "结束",
      },
      status: {
        1: "待启动",
        2: "进行中",
        3: "结束",
        4: "已作废",
        5: "终止",
      },
      // 操作列的弹窗
      visible: false,
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        initiateOrg: undefined,
        initiateName: "",
        processName: "",
        subject: "",
      },
      deptList: [],
    };
  },
  created() {
    this.getDataList();
    this.getDeptList();
  },
  methods: {
    getPagination({page,limit}) {
      this.queryParams.pageNo = page
      this.queryParams.pageSize = limit
      this.getDataList();
    },
    getDataList() {
      this.loading = true;
      getList(this.queryParams).then((response) => {
        this.list = response.records;
        this.total = response.total;
        this.loading = false;
      });
    },
    async getDeptList() {
      const { data } = await getDept();
      this.deptList = data;
    },
    async stop(row) {
      await stopProcess({
        processNo: row.processNo,
        processType: row.processType,
      });
      this.getDataList();
      this.$modal.msgSuccess("操作成功");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getDataList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
  },
};
</script>
